<template>
  <ul :class="comClazz">
    <li
      :class="[comItemClazz, 'm-pagination-a__limit']"
      @click.stop="openLimitSelect"
    >
      {{ limit }} {{ t("message.pagination.pagesize") }}

      <DownOutlined
        :style="{ fontSize: '12px', marginLeft: '4px' }"
        :rotate="limitSelectStatus ? 180 : 0"
      />
    </li>

    <li
      :class="[comItemClazz, { 'is-disabled': comPreBtnDisabled }]"
      @click="goPrePage"
    >
      <LeftOutlined />

      {{ previousText }}
    </li>

    <li :class="[comItemClazz, 'm-pagination-a__info']">
      {{ value }} / {{ pageCount }}
    </li>

    <li
      :class="[comItemClazz, { 'is-disabled': comNextBtnDisabled }]"
      @click="goNextPage"
    >
      {{ nextText }}
      <RightOutlined />
    </li>
    <div v-if="limitSelectStatus" ref="" class="m-pagination-a__limit-select">
      <div
        ref="limitSelectDropdownRef"
        class="m-pagination-a__dropdown"
        @click.stop="selectLimit"
      >
        <div
          v-for="(opt, index) in comPageSizeOptions"
          :key="`${opt}-${index}`"
          :tabindex="opt"
          class="m-pagination-a__dropdown-item"
          :class="{ active: String(opt) === String(limit) }"
        >
          {{ opt }}
        </div>
      </div>
    </div>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref } from "vue";
import { useClickAway } from "@vant/use";

import {
  EllipsisOutlined,
  LeftOutlined,
  RightOutlined,
  DownOutlined,
} from "@ant-design/icons-vue";
import { useLocaleInject } from "../../../hooks/useLocale";
export default defineComponent({
  name: "MPaginationA",
  components: {
    // EllipsisOutlined,
    LeftOutlined,
    RightOutlined,

    DownOutlined,
  },
  props: {
    // 当前页

    value: {
      type: Number,
      default: 1,
    },
    // 总条数
    total: {
      type: Number,
      default: 0,
    },
    // 一页几条
    limit: {
      type: Number,
    },
    // 分页选项
    pageSizeOptions: {
      type: [Array, Boolean],
      default: true,
    },
    // 页码显示的个数
    pageSlot: {
      type: Number,
      default: 7,
    },
    size: {
      type: String,
      default: "large",
    },
    disabled: Boolean,
  },
  emits: ["change"],
  setup(props, { emit }) {
    const { t } = useLocaleInject();
    const limitSelectStatus = ref(false);
    const limitSelectDropdownRef = ref(null);
    // 这两个后面封装下
    const comClazz = computed(() =>
      [
        "m-pagination-a",
        props.size ? `m-pagination-a--${props.size}` : "",
        {
          "is-disabled": props.disabled, // 状态全部以 is-开头
        },
      ].filter(Boolean)
    );

    const comItemClazz = computed(() => {
      return [
        "m-pagination-a__item",
        props.size ? `m-pagination-a__item--${props.size}` : "",
        {
          "is-disabled": props.disabled, // 状态全部以 is-开头
        },
      ];
    });

    // 总页数  12 / 10 = 2
    const pageCount = computed(() => {
      if (props.total > 0) {
        return Math.max(1, Math.ceil(props.total / props.limit));
      } else {
        return 1;
      }
    });
    const comPageSizeOptions = computed(() => {
      if (!props.pageSizeOptions) {
        return [];
      }
      if (Array.isArray(props.pageSizeOptions)) {
        return props.pageSizeOptions;
      }
      return [10, 20, 30];
    });
    const comPreBtnDisabled = computed(() => {
      return props.value === 1 || props.disabled;
    });
    const comNextBtnDisabled = computed(
      () =>
        props.disabled ||
        pageCount.value === 1 ||
        props.value === pageCount.value
    );

    const previousText = computed(() => t("message.pagination.previous"));
    const nextText = computed(() => t("message.pagination.next"));

    // 分页跳转
    const doUpdatePage = (page: number) => {
      if (page === props.value) {
        return;
      }

      emit("change", page, props.limit);
    };

    const goPrePage = () => {
      if (comPreBtnDisabled.value) {
        return;
      }
      doUpdatePage(props.value - 1);
    };

    const goNextPage = () => {
      if (comNextBtnDisabled.value) {
        return;
      }
      doUpdatePage(props.value + 1);
    };

    useClickAway(limitSelectDropdownRef, () => {
      limitSelectStatus.value = false;
    });

    const openLimitSelect = () => {
      limitSelectStatus.value = !limitSelectStatus.value;
    };

    const selectLimit = (e) => {
      if (e.target.tabIndex && e.target.tabIndex > 0) {
        emit("change", props.value, parseInt(e.target.tabIndex));
      }

      limitSelectStatus.value = false;
    };

    return {
      comClazz,
      selectLimit,
      pageCount,
      comPageSizeOptions,
      comPreBtnDisabled,
      comNextBtnDisabled,
      goPrePage,
      goNextPage,
      comItemClazz,
      limitSelectStatus,
      openLimitSelect,
      limitSelectDropdownRef,
      previousText,
      nextText,

      t,
    };
  },
});
</script>
